<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/member/mailbox.css">
    <link rel="stylesheet" href="../../css/public/base.css">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script src="../../js/public/jquery-3.3.1.js"></script>
</head>
<style>
    /* .nav_two .left>ul>li:nth-of-type(1){
          background-color: #e5f1fc;
      } */
      .nav_two {
          margin-right: 20px;
          height: 100%;
          color: #666;
      }
  
      .nav_two .left {
  
          /* text-align: center; */
          /* border: 1px solid #000; */
          background-color: #FFF;
          height: 100%;
          border-radius: 8px;
          font-size: 16px;
          width: 200px;
      }
  
      .nav_two .left>ul li {
          min-height: 53px;
          line-height: 53px;
          list-style-type: none;
          position: relative;
          cursor: pointer;
          color:#666;
      }
  
      .nav_two .left>ul li a {
          position: absolute;
          height: 100%;
          width: 100%;
      }
  
      .nav_two .left>ul li ul {
          transition: all 0.2s;
          max-height: 0;
          overflow: hidden;
          /* display: none; */
      }
  
      .nav_two .left>ul li ul li {
          min-height: 53px;
      }
  
      .nav_two .left>ul li img {
          position: relative;
          left: 30px;
          transition: all 0.2s;
      }
  
      .nav_two .active {
          background-color: #e5f1fc;
      }
  
      .nav_two .left>ul li .bbx {
          max-height: 300px;
      }
  
      .rotate {
          transform: rotate(180deg)
      }
      .xia ul li{
      padding-left: 20px;
      font-size: 15px;
    }
  </style>

<body>

    <div class="mailbox-content">
        <div class="left">
            <div class='nav_two'>
                <div class="left">
                        <ul>
                                <li><span class="circle"></span><a href="../member/MemberManagement.html"></a>会员管理</li>
                                <li class="active"><span class="circle"></span><a href="../member/mailbox.html"></a>会员信箱</li>
                                <li class='xia'>
                                  <span class='xiaspan'><span class="circle"></span>交易额管理 <img src="../../image/xiala.png" alt=""></span>
                  
                                  <ul>
                                    <li><a href="../../html/member/DealImport.html"></a><span class="circle"></span>交易额导入</li>
                                    <li><a href="../../html/member/record .html"></a><span class="circle"></span>交易额记录</li>
                                  </ul>
                                </li>
                                <li><span class="circle"></span><a href="../member/Upgrade.html"></a>用户升级记录</li>
                                <li><span class="circle"></span><a href="../member/Recommend.html"></a>推荐图谱</li>
                              </ul>
                    </ul>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="top">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="flex-left" style="flex:2">
                            <div class="layui-inline">
                                <label class="layui-form-label wdStyle">留言时间</label>
                                <input type="text" style="width:196px;" placeholder="请输入…" class="layui-input"
                                    id='time1'>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label wdStyle">回复时间</label>
                                <input type="text" style="width:196px;" placeholder="请输入…" class="layui-input"
                                    id='time2'>
                            </div>
                        </div>
                        <div class="flex-left">
                            <div class="layui-inline">
                                <button class="layui-btn btn1" lay-submit="" lay-filter="demo1">查询</button>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn btn2" lay-submit="" lay-filter="demo1" type="reset">重置</button>
                            </div>
                            <!-- 展开 -->
                        </div>
                    </div>
                </form>
            </div>
            <!-- 写信和发件箱 -->
            <div class="site-demo-button" id="layerDemo" style="margin: 10px 0;">
                <button data-method="edit" class="layui-btn" style="border-radius:8px;background: #2d528f;width: 100px;">写信</button>
                <button data-method="inbox" class="layui-btn fj" style="border-radius:8px;background: #fff;width: 100px;color: #2d528f;border: solid 1px #2d528f;">收件箱</button>
            </div>
            <!-- 表格部分· -->
            <div class="rl-table">
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>

    <!-- 写信弹框内容 -->
    <div class="editForm layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">发件人</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮件主题</label>
            <div class="layui-input-block">
                <input type="text" name="title" required lay-verify="required" placeholder="请输入" autocomplete="off"
                    class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">内容(可选)</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入" class=" layui-input layui-textarea" style="resize:none;height: 120px;"></textarea>
            </div>
        </div>
    </div>

    <!-- 查看弹层的内容 -->
    <div class="lookcont">
        <div class="inline">
            <span>发件人</span>
            <p>01</p>
        </div>
        <div class="inline">
            <span>主题</span>
            <p>中国</p>
        </div>
        <div class="inline">
            <span>留言时间</span>
            <p>2018.11.26 18:00:00</p>
        </div>
        <div class="inline">
            <span>回复时间</span>
            <p>2018.11.26 18:00:00</p>
        </div>
        <div class="inline">
            <span>内容</span>
            <p>11111111111111</p>
        </div>
    </div>
    <script type="text/html" id="barDemo">
        <a style="color:#2d528f;margin-right: 30px;" lay-event="detail" class="look">查看</a>
        <a style="color:#ff0000;" lay-event="del">删除</a>
      </script>
    <script src="../../layui/layui.js"></script>
    <script src='../../js/member/member.js'></script>
    <script>
        var t = document.querySelector.bind(document)
        let flag = localStorage.getItem('twonav')
        if (flag == '1') {
            t('.xia>ul').classList.add('bbx')
            t('.xia img').classList.add('rotate')
        }
        t('.xiaspan').onclick = function () {
            flag = flag == 0 ? 1 : 0
            t('.xia>ul').classList.toggle('bbx')
            t('.xia img').classList.toggle('rotate')
            localStorage.setItem('twonav', flag)
        }
       // 点击发件箱，跳转到收件箱
       $('.fj').click(function () {
            localStorage.setItem('adress', '../member/mailbox.html')
        })
    </script>
    <script>
        layui.use(['form', 'table', 'laypage', 'layer', 'laydate'], function () {
            var table = layui.table, //表格
                laypage = layui.laypage, //分页
                $ = layui.jquery, //弹框
                layer = layui.layer,
                form = layui.form //表单
            laydate = layui.laydate; //日期
// 表格数据
table.render({
                elem: '#test'
                    //      , url: '/demo/table/user/'
                    ,
                skin: 'nob',
                width: '100%'
                    //        ,limits:[5,10,20,50]
                    ,
                cols: [
                    [{
                        type: 'checkbox'
                    }, {
                        field: 'id',
                        title: '序号',
                        minWidth: 100,
                        unresize: true
                    }, {
                        field: 'addressee',
                        title: '发件人',
                        minWidth: 150,
                        unresize: true
                    }, {
                        field: 'addresseeName',
                        title: '发件人姓名',
                        minWidth: 150,
                        unresize: true
                    }, {
                        field: 'title',
                        title: '标题',
                        minWidth: 180,
                        unresize: true,
                    }, 
                    {
                        field: 'leavingTime',
                        title: '留言时间',
                        minWidth: 180,
                        unresize: true,
                        sort: true
                    },
                    {
                        field: 'backTime',
                        title: '回复时间',
                        minWidth: 180,
                        unresize: true,
                        sort: true
                    }, {
                        field: 'status',
                        title: '状态',
                        minWidth: 100,
                        unresize: true
                    }, {
                        field: 'operate',
                        title: '操作',
                        minWidth: 130,
                        toolbar: '#barDemo',
                        unresize: true,
                        fixed: 'right'
                    }]
                ],
                data: [{
                        "id": "01",
                        "addressee": 12345678,
                        "addresseeName": "张三",
                        "title": "12345611789",
                        "leavingTime": "2018.01.01 18:00:00",
                        "backTime":"2018.01.01 18:00:00",
                        "status":"未读",
                        "sort": "01"
                    }, {
                        "id": "01",
                        "addressee": 12345678,
                        "addresseeName": "张三",
                        "title": "12345611789",
                        "leavingTime": "2018.01.01 18:00:00",
                        "backTime":"2018.01.01 18:00:00",
                        "status":"未读",
                        "sort": "01"
                    }, {
                        "id": "01",
                        "addressee": 12345678,
                        "addresseeName": "张三",
                        "title": "12345611789",
                        "leavingTime": "2018.01.01 18:00:00",
                        "backTime":"2018.01.01 18:00:00",
                        "status":"未读",
                        "sort": "01"
                    }, {
                        "id": "01",
                        "addressee": 12345678,
                        "addresseeName": "张三",
                        "title": "12345611789",
                        "leavingTime": "2018.01.01 18:00:00",
                        "backTime":"2018.01.01 18:00:00",
                        "status":"未读",
                        "sort": "01"
                    }, {
                        "id": "01",
                        "addressee": 12345678,
                        "addresseeName": "张三",
                        "title": "12345611789",
                        "leavingTime": "2018.01.01 18:00:00",
                        "backTime":"2018.01.01 18:00:00",
                        "status":"未读",
                        "sort": "01"
                    }, {
                        "id": "01",
                        "addressee": 12345678,
                        "addresseeName": "张三",
                        "title": "12345611789",
                        "leavingTime": "2018.01.01 18:00:00",
                        "backTime":"2018.01.01 18:00:00",
                        "status":"未读",
                        "sort": "01"
                    },
                    {
                        "id": "01",
                        "addressee": 12345678,
                        "addresseeName": "张三",
                        "title": "12345611789",
                        "leavingTime": "2018.01.01 18:00:00",
                        "backTime":"2018.01.01 18:00:00",
                        "status":"未读",
                        "sort": "01"
                    }, {
                        "id": "01",
                        "addressee": 12345678,
                        "addresseeName": "张三",
                        "title": "12345611789",
                        "leavingTime": "2018.01.01 18:00:00",
                        "backTime":"2018.01.01 18:00:00",
                        "status":"未读",
                        "sort": "01"
                    },{
                        "id": "01",
                        "addressee": 12345678,
                        "addresseeName": "张三",
                        "title": "12345611789",
                        "leavingTime": "2018.01.01 18:00:00",
                        "backTime":"2018.01.01 18:00:00",
                        "status":"未读",
                        "sort": "01"
                    }, {
                        "id": "01",
                        "addressee": 12345678,
                        "addresseeName": "张三",
                        "title": "12345611789",
                        "leavingTime": "2018.01.01 18:00:00",
                        "backTime":"2018.01.01 18:00:00",
                        "status":"未读",
                        "sort": "01"
                    }, {
                        "id": "01",
                        "addressee": 12345678,
                        "addresseeName": "张三",
                        "title": "12345611789",
                        "leavingTime": "2018.01.01 18:00:00",
                        "backTime":"2018.01.01 18:00:00",
                        "status":"未读",
                        "sort": "01"
                    },{
                        "id": "01",
                        "addressee": 12345678,
                        "addresseeName": "张三",
                        "title": "12345611789",
                        "leavingTime": "2018.01.01 18:00:00",
                        "backTime":"2018.01.01 18:00:00",
                        "status":"未读",
                        "sort": "01"
                    }, {
                        "id": "01",
                        "addressee": 12345678,
                        "addresseeName": "张三",
                        "title": "12345611789",
                        "leavingTime": "2018.01.01 18:00:00",
                        "backTime":"2018.01.01 18:00:00",
                        "status":"未读",
                        "sort": "01"
                    }, {
                        "id": "01",
                        "addressee": 12345678,
                        "addresseeName": "张三",
                        "title": "12345611789",
                        "leavingTime": "2018.01.01 18:00:00",
                        "backTime":"2018.01.01 18:00:00",
                        "status":"未读",
                        "sort": "01"
                    }],
                page: true
            });

            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.open({
                        type: 1,
                        title: '信息',
                        closeBtn: 1,
                        area: '700px;',
                        shade: 0,
                        move: false,
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['确定', '取消'],
                        btnAlign: 'c',
                        moveType: 1, //拖拽模式，0或者1
                        content: $('.lookcont'),
                        success: function () {
                           
                        }
                    });
                } else if (obj.event === 'del') {
                    layer.open({
                        type: 0,
                        id: 'turnDown' //防止重复弹出
                            ,
                        area: ['400px !important', '220px !important'],
                        title: "删除",
                        content: '<p style="font-size: 16px;height: 40px;line-height: 40px">是否确认 删除?</p>',
                        btn: ['确定', '取消'],
                        btnAlign: 'r' //按钮对齐方式
                            ,
                        shade: 0,
                        shadeClose: true,
                        move: false,
                        resize: false,
                        yes: function () {
                            layer.closeAll();
                            // layer.msg("成功删除")
                        },
                        btn2: function () {
                            layer.closeAll();
                        }
                    });
                }
            });
           
            //时间控件
            laydate.render({
                elem: '#time1', //指定元素
                type: 'datetime',
                format: 'yyyy-MM-dd HH:mm:ss', //自定义格式化
                trigger: 'click', //采用click弹出
                theme:'#2d528f'
            });
            laydate.render({
                elem: '#time2', //指定元素
                type: 'datetime',
                format: 'yyyy-MM-dd HH:mm:ss', //自定义格式化
                trigger: 'click', //采用click弹出
                theme:'#2d528f'
            })

            //触发事件
            var active = {
                edit: function () {
                    //写信 弹框层
                    layer.open({
                        type: 1,
                        title: '写信',
                        closeBtn: 1,
                        area: ['710px', '410px'],
                        shade: 0,
                        move: false,
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['发送'],
                        btnAlign: 'c',
                        moveType: 1, //拖拽模式，0或者1
                        content: $('.editForm'),
                        success: function (layero) {
                            // var btn = layero.find('.layui-layer-btn');
                            // btn.find('.layui-layer-btn0').attr({
                            //     href: '#',
                            //     target: '_blank'
                            // });
                        }
                    });

                },

            };
           

            $('#layerDemo .layui-btn').on('click', function () {
                var othis = $(this),
                    method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });
        })
    </script>
</body>

</html>